<template>
  <el-aside width="200px">
    <el-menu :default-active="defaultActive" class="menu-box" @select="handleMenuClick">
      <el-scrollbar>
        <el-menu-item index="welcom" key="welcom">
          <el-icon><i-ep-CoffeeCup /></el-icon>
          <span>欢迎</span>
        </el-menu-item>
        <menu-item :menus="menus"></menu-item>
      </el-scrollbar>
    </el-menu>
  </el-aside>
</template>

<script setup>
import MenuItem from '@/views/home/MenuItem.vue'
import { getCategoryAll } from '@/api/category'
import { array2Tree } from '@/utils/index.js'

const menus = ref([])
const defaultActive = ref('welcom')
const homeOption = inject('homeOption')

onActivated(() => {
  getMenu()
})

const handleMenuClick = (key, kepath) => {
  // console.log(key, kepath)
  defaultActive.value = key
  homeOption.menuClick(key)
}

const getMenu = async () => {
  const { success, data, message } = await getCategoryAll(false)

  if (success) {
    menus.value = array2Tree(data, 0)
    // 兼容缓存  当是welcom页面时，不请求列表数据
    if (homeOption.activeMenu.value != 'welcom') {
      defaultActive.value = homeOption.activeMenu.value
      homeOption.menuClick(defaultActive.value)
    }
  } else {
    ElMessage({
      type: 'error',
      message
    })
  }
}
</script>

<style lang="scss" scoped>
.menu-box {
  height: 100%;
}
</style>
